import React, { Component } from 'react'
// 导入轮播图组件
import { Swiper, Grid } from 'antd-mobile'
// 导入请求模块
import { API } from '../../utils/api'
// 导入导航菜单图片
import Nav1 from '../../assets/images/nav-1.png'
import Nav2 from '../../assets/images/nav-2.png'
import Nav3 from '../../assets/images/nav-3.png'
import Nav4 from '../../assets/images/nav-4.png'
// 导入Index自己的样式文件
import './index.scss'
// 导入 utils 中，获取城市的方法
import { getCurrentCity } from '../../utils'
// 导入 BASE_URL
import { BASE_URL } from '../../utils/url'
// 导入顶部搜索框
import SearchHeader from '../../components/SearchHeader'
import NewsItem from '../../components/NewsItem'

// 导航菜单数据
const navs = [
  { id: 1, img: Nav1, title: '整租', path: '/home/list' },
  { id: 2, img: Nav2, title: '合租', path: '/home/list' },
  { id: 3, img: Nav3, title: '地图找房', path: '/map' },
  { id: 4, img: Nav4, title: '去出租', path: '/rent/add' }
]

export default class index extends Component {
  state = {
    // 轮播图状态数据
    swipers: [],
    // 租房小组数据
    groups: [],
    // 最新资讯数据
    news: [],
    // 当前城市名称
    curCityName: '上海'
  }

  // 获取轮播图数据的方法
  async getSwiper() {
    const { data: res } = await API.get('/home/swiper')
    this.setState({
      swipers: res.body
    })
  }

  // 获取租房小组数据的方法
  async getGroups() {
    const { data: res } = await API.get('/home/groups', {
      params: {
        area: 'AREA%7C88cff55c-aaa4-e2e0'
      }
    })
    this.setState({
      groups: res.body
    })
  }

  // 获取新闻资讯数据的方法
  async getNews() {
    const { data: res } = await API.get('/home/news', {
      params: {
        area: 'AREA%7C88cff55c-aaa4-e2e0'
      }
    })
    this.setState({
      news: res.body
    })
  }

  async componentDidMount() {
    this.getSwiper()
    this.getGroups()
    this.getNews()

    // 2. 通过 IP 定位获取到当前城市名称
    const curCity = await getCurrentCity()
    this.setState({
      curCityName: curCity.label
    })
  }

  // 渲染轮播图结构
  renderSwiper() {
    if (!this.state.swipers.length) return null
    return (
      <Swiper
        loop
        autoplay
        indicatorProps={{
          color: 'white'
        }}
      >
        {this.state.swipers.map(item => (
          <Swiper.Item key={item.id}>
            <a href={BASE_URL} style={{ display: 'inline-block', width: '100%', height: 212 }}>
              <img src={BASE_URL + item.imgSrc} alt={item.alt} width="100%" />
            </a>
          </Swiper.Item>
        ))}
      </Swiper>
    )
  }

  // 渲染导航栏结构
  renderNavs() {
    return navs.map(item => (
      <li key={item.id} onClick={() => this.props.history.push(item.path)}>
        <img src={item.img} alt="" />
        <h2>{item.title}</h2>
      </li>
    ))
  }

  // 渲染租房小组结构
  renderGroup() {
    return this.state.groups.map(item => (
      <Grid.Item key={item.id}>
        <div className="desc">
          <div className="title">{item.title}</div>
          <span className="info">{item.desc}</span>
        </div>
        <img src={BASE_URL + item.imgSrc} alt="" />
      </Grid.Item>
    ))
  }

  // 渲染最新资讯结构
  renderNews() {
    return this.state.news.map(item => <NewsItem key={item.id} news={item} />)
  }

  render() {
    return (
      <div className="index">
        {/* 轮播图 */}
        <div className="swiper">
          {this.renderSwiper()}

          {/* 搜索框 */}
          <SearchHeader cityName={this.state.curCityName} />
        </div>

        {/* 导航菜单 */}
        <ul className="nav">{this.renderNavs()}</ul>

        {/* 租房小组 */}
        <div className="group">
          <h3 className="title">
            租房小组 <span className="more">更多</span>
          </h3>

          {/* 宫格组件 */}
          <Grid columns={2} gap={10 | 10}>
            {this.renderGroup()}
          </Grid>
        </div>

        {/* 最新资讯 */}
        <div className="news">
          <h3 className="title">最新资讯</h3>
          <div className="news-list">{this.renderNews()}</div>
        </div>
      </div>
    )
  }
}
